{extend name="builder/public/common" /}

{block name="style"}


{/block}

{block name="main"}

{include file='builder/public/layui-breadcrumb'}


<div class="layui-card layadmin-body">
<!--错误提示-->
<article class="dispatch-page minWP text-c layui-hide">
    <p class="dispatch-title"><i class="iconfont  va-m"></i><span class="va-m"> </span></p>
    <p class="dispatch-description"></p>
    <p class="dispatch-info"> 页面自动<a href="javascript:;" onClick="dispatchUrl(this)" _href="" is_hash="1"
            class="c-primary">跳转</a>，等待时间：<b id="wait"></b>秒</p>
</article>
<form class="layui-form layadmin-form">
    <div class="layui-card" style="padding:10px;line-height: 30px;">
      {$breadcrumbTitle|default='分配权限.'}
      <button class="layui-btn layui-btn-normal layui-btn-sm animation4" style="position: fixed;right:5%;top:155px;height: 80px;z-index: 999999; border-radius: 100%;width: 80px;" id="update-btn" lay-submit type="button" lay-filter="authTree">
            更新权限
      </button>
      <div style="float:right;display: flex;flex-direction: row;align-items: flex-end;justify-content: flex-end;flex-wrap: wrap">
            <button class="layui-btn layui-btn-normal layui-btn-sm" id="check-all" type="button">
                全选
            </button>
            <button class="layui-btn layui-btn-normal layui-btn-sm" id="uncheck-all" type="button">
                全不选
            </button>
            <button class="layui-btn layui-btn-normal layui-btn-sm" id="open-all" type="button">
                全部展开
            </button>
            <button class="layui-btn layui-btn-normal layui-btn-sm layui-hide-xs" id="close-all" type="button">
                全部关闭
            </button>
            
            <button class="layui-btn layui-btn-primary layui-border-black layui-btn-sm layui-hide-xs" id="return_back" type="button">
                返回上一步
            </button>
        </div>
    </div>
     
        <div class="layui-card-body" style="min-height:80%">
                <div class="layui-form-item">
                    <div id="auth-tree"></div>
                </div>
        </div>
    </div>
    
  
</form>
</div>
<!--过渡页面显示效果的js-->
{include file='builder/form/dispatch'}
{/block}

{block name="script"}

<script>
    
    //构建面包屑
    createBreadcrumb("{$breadcrumbTitle|default='分配权限.'}");

    var http = new Request({ token_url: api.token_url, async: false, token_store_name: 'auth_group' });
    layui.use(["form","layer"],function(){
         var form = layui.form,layer=layui.layer;
         form.on("submit(authTree)", function (obj) {
             var id = get_url_param_value('id');
             
             if(objToArray(obj.field).join(",") == ''){
                 layer.msg("至少选中一项权限！",function(){});
                return false;
             }
             if (id != null && id != '') {
                 $(obj.elem).addClass("layui-btn-disabled");
                 $(obj.elem).prepend("<i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop'></i>")
                 $(obj.elem).attr("disabled", "disabled");
                var res = http.request('post',"{$updateApi}",{id:id,value: objToArray(obj.field).join(","), field:'rules'});
                if(res.code ==0){
              
                    builderDispatch(res.data);
                }else{
                
                    layer.msg(res.msg, function () { });
                    $(obj.elem).removeClass("layui-btn-disabled");
                    $(obj.elem).removeAttr("disabled");
                    $(obj.elem).children("i").remove();
                }
             }
         })
     })
    // 全选样例
    $("#check-all").on("click", function () {
        layui.use(['authtree'], function () {
            var authtree = layui.authtree;
            authtree.checkAll("#auth-tree");
        })
    })
    // 全不选样例
    $("#uncheck-all").on("click", function () {
        layui.use(['authtree'], function () {
            var authtree = layui.authtree;
            authtree.uncheckAll("#auth-tree");
        })
    })
     //全部展开
    $("#open-all").on("click", function () {
        layui.use(['authtree'], function () {
            var authtree = layui.authtree;
            authtree.showAll("#auth-tree");
        })
    })
    //全部关闭
    $("#close-all").on("click", function () {
        layui.use(['authtree'],function(){
            var authtree = layui.authtree;
            authtree.closeAll("#auth-tree");
        })
    })
    //返回上一步
    $("#return_back").on("click",function(){
        window.history.back(-1);
    });
    layui.use(['jquery', 'authtree', 'form', 'layer'], function () {
            var $ = layui.jquery;
            var authtree = layui.authtree;
            var form = layui.form;
            var layer = layui.layer;
            // 一般来说，权限数据是异步传递过来的
            
            var id = get_url_param_value('id');
            if(id != null && id != ''){
                var res = http.request('get', "{:$dataApi}", { id: get_url_param_value('id') });
                if (res.code == 0) {
                    var data = authtree.listConvert(res.data, { primaryKey: 'id', parentKey: 'pid', startPid: 0, nameKey: 'title', valueKey: 'id' });
                    var checkeds = (res.checkeds).split(",");
                    for (var i = 0; i < checkeds.length; i++){
                            checkeds[i] = parseInt(checkeds[i]);  
                        }
                    // console.log(checkeds);
                    authtree.render("#auth-tree", data, {
                        inputname: 'auth_ids[]',
                        layfilter: 'lay-check-auth',
                        autowidth: true,
                        checkedKey: checkeds,
                        layfilter: 'LAY-auth-tree-hide-choose-input',
                        theme: 'auth-skin-default',
                        themePath: '__LAYER_MODULES__/authtree/themes/' 
                    });
                    //初始化全部展开
                    authtree.showAll("#auth-tree");
                }
            }else{
                layer.msg("缺少要分配的权限组ID",function(){});
            }
            
           
        });
</script>
{/block}